<template>
  <div class="infinite-container">
    <div class="bgwhite">
      <mu-list>
        <mu-list-item title="费用总额">
          <span slot="right" class="feeText">￥{{regFee | saveTwo}}</span>
        </mu-list-item>
      </mu-list>
    </div>
    <div class="mt10"></div>
    <pay-method></pay-method>
    <div class="flex flex_between flex_vcenter bottomH">
      <div>
        <span>需支付：</span>
        <span class="feeTextBig">￥{{regFee | saveTwo}}</span>
      </div>
      <mu-raised-button label="立即支付" primary @click="budget()"/>
    </div>
  </div>
</template>

<script>
  import payMethod from '../../components/payMethod.vue'
  import {commonAjax, RESTFUL_API} from '@/api/api'
  import wxPay from '../../api/wxPay.js'
  export default {
    data () {
      return {
        payItems: [],
        regFee: '',
        numbers: []
      }
    },
    components: {
      payMethod
    },
    filters: {
      saveTwo (val) {
        if (val === 0) {
          return 0
        } else if (val.length === 0) {
          return 0
        } else {
          return parseFloat(val).toFixed(2)
        }
      }
    },
    mounted () {
      this.numbers = this.$route.query.numbers
      this.regFee = this.$route.query.totalFee
    },
    methods: {
      budget () {
        let numbers = this.numbers.join(',')
        console.log(numbers)
        let param = {
          identificationNumbers: numbers
        }
        commonAjax(`${RESTFUL_API.paymentBudget}`, param, true).then(res => {
          if (res.data.code === 1) {
            this.pay(res.data.data.amount, res.data.data.invoiceNumber, numbers)
          }
        })
      },
      pay (fee, code, str) {
          let body = {
          bustype: 2,
          invoiceNumber: code,
          identificationNumbers: str
        }
        let param = {
          [this.$APP_PLATFORM_NAME]: sessionStorage[this.$APP_PLATFORM_NAME],
          totalFee: fee,
          body: JSON.stringify(body)
        }
        commonAjax(`${RESTFUL_API.wxPay}`, param, true).then(res => {
              if (res.data.code == 200) {
            wxPay(res.data.data, this.payOk, this.payFail)
          }
        })
      },
      payOk () {
        this.$router.push({
          path: '/payResult',
          query: {
            result: 'ok',
            backPath: '/mainPay?tab=history',
            backName: '查看已支付项目',
            tab: 'history'
          }
        })
      },
      payFail () {
        this.$router.push({
          path: '/payResult',
          query: {
            result: 'fail',
            backPath: '/mainPay',
            backName: '重新支付',
            tab: 'unpay'
          }
        })
      }
    }
  }
</script>

<style scoped lang="less">
  @import "../../common/css/vars";
  @import "../../common/css/flex.css";
  @color-feeText:#F7A945;
  .feeText{
    color:@color-feeText
  }
  .feeTextBig{
    color:@color-feeText;
    font-size:20px;
  }
</style>
